<template>
  <div id="develop">
    <v-row :gutter="16" :style="{ margin: '12px 5px' }">
      <!-- 导航 -->
      <v-col class="gutter-row" span="8">
        <v-breadcrumb>
          <v-breadcrumb-item>
            <v-icon type="home"></v-icon>
            <router-link :to="{ name: 'Index' }">首页</router-link>
          </v-breadcrumb-item>
          <v-breadcrumb-item>开发者</v-breadcrumb-item>
        </v-breadcrumb>
      </v-col>
    </v-row>
    <v-row :gutter="16" :style="{ margin: '12px 5px', width: '80%', left: '10%' }">
      <v-col v-for="(developer, $index) in developers" :key="$index" class="gutter-row" span="9" offset="2">
        <v-card :body-style="{ padding: 0 }" style=" heigth:240px;">
          <div class="custom-image">
            <img alt="photo" width="100%" :src="developer.image">
          </div>
          <div class="custom-card">
            <a :href="developer.href">{{ developer.name }}</a>
          </div>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: "Develop",
  data () {
    return {
      developers: [
        { name: "皮皮", href: "https://github.com/xuanbo", image: "https://avatars0.githubusercontent.com/u/15867447?s=400&v=4" },
        { name: "阿尤哥", href: "https://gitee.com/alongge", image: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" }
      ]
    };
  }
};
</script>

<style>
#develop .ant-card{
  margin: 0% 15%;
  font-size: 16px;
  padding: 0px;
  background-color: white;
}

.custom-image {
  height: 320px;
}
.custom-image img {
  width: 100%;
  height: 100%;
}

.custom-card{
  text-align: center;
}
</style>